<template>
  <view class="content_box">
	<view class="first-top">
	  	<view class="first-banner">
			<view class="banner-box">
				<img src="../../static/images/mine/team.png"alt="" />
				<text>团队成员</text>
			</view>
			<view class="banner-box">
				<img src="../../static/images/mine/team_together.png"alt="" />
				<text>团队战绩</text>
			</view>
			<view class="banner-box">
				<img src="../../static/images/mine/honer.png"alt="" />
				<text>荣誉榜</text>
			</view>
			<view class="banner-box">
				<img src="../../static/images/mine/invaite.png"alt="" />
				<text>邀请成员</text>
			</view>
	  	</view>
		<view class="second-banner">
			<view class="second-item">
				<view class="item-num">
					<text>6</text>
				</view>
				<view class="item-name">
					<text>团队人数</text>
				</view>
			</view>
			<view class="second-item">
				<view class="item-num is-border">
					<text>25</text>
				</view>
				<view class="item-name">
					<text>累计单数</text>
				</view>
			</view>
			<view class="second-item">
				<view class="item-num" >
					<text>1650</text>
				</view>
				<view class="item-name">
					<text>团队总收入</text>
				</view>
			</view>
		</view>
	</view>
	<view class="ad">
		<view class="ad-text" >
			<view class="marqueeText" :style="{ transform: `translateX(${position}px)` }">{{text}}{{text}} </view>
		</view>
		<image src="../../static/images/mine/enter_icon.png" mode=""></image>
	</view>
	<view class="revenue-box">
		<view class="revenue-box-money">
			<image src="../../static/images/mine/inner_icon.png" mode=""></image>
			<text>您的收入</text>
		</view>
		<view class="revenue-box-items">
			<view class="revenue-box-item">
				<view class="revenue-box-right">
					<view class="right-top">
						<text>测试-区域队长</text>
					</view>
					<view class="right-bottom">
						<text>自己推广  张涛</text>
					</view>
				</view>
				<view class="revenue-box-left">
					<view class="left-top">
						<text>200</text>
					</view>
					<view class="left-botom">
						<text>2025-05-20 02:29:59</text>
					</view>
				</view>
			</view>
			<view class="revenue-box-item">
				<view class="revenue-box-right">
					<view class="right-top">
						<text>测试-区域队长</text>
					</view>
					<view class="right-bottom">
						<text>自己推广  张涛</text>
					</view>
				</view>
				<view class="revenue-box-left">
					<view class="left-top">
						<text>200</text>
					</view>
					<view class="left-botom">
						<text>2025-05-20 02:29:59</text>
					</view>
				</view>
			</view>
			<view class="revenue-box-item">
				<view class="revenue-box-right">
					<view class="right-top">
						<text>测试-区域队长</text>
					</view>
					<view class="right-bottom">
						<text>自己推广  张涛</text>
					</view>
				</view>
				<view class="revenue-box-left">
					<view class="left-top">
						<text>200</text>
					</view>
					<view class="left-botom">
						<text>2025-05-20 02:29:59</text>
					</view>
				</view>
			</view>
			<view class="revenue-box-item">
				<view class="revenue-box-right">
					<view class="right-top">
						<text>测试-区域队长</text>
					</view>
					<view class="right-bottom">
						<text>自己推广  张涛</text>
					</view>
				</view>
				<view class="revenue-box-left">
					<view class="left-top">
						<text>99</text>
					</view>
					<view class="left-botom">
						<text>2025-05-20 02:29:59</text>
					</view>
				</view>
			</view>
			<view class="revenue-box-item">
				<view class="revenue-box-right">
					<view class="right-top">
						<text>测试-区域队长</text>
					</view>
					<view class="right-bottom">
						<text>自己推广  张涛</text>
					</view>
				</view>
				<view class="revenue-box-left">
					<view class="left-top">
						<text>150</text>
					</view>
					<view class="left-botom">
						<text>2025-05-20 02:29:59</text>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</view>
</template>
<script>
	export default {
	  data() {
	    return {
	      text: "信鸟查最新版本正式上线! ",
	      position: 0,
	      animationFrame: null
	    }
	  },
	  mounted() {
		  console.log(123123)
	    this.startMarquee();
	  },
	  beforeDestroy() {
	    cancelAnimationFrame(this.animationFrame);
	  },
	  methods: {
	    startMarquee() {
	      let containerWidth = 0
	      let contentWidth = 0 // 因为复制了一份内容
 const query = wx.createSelectorQuery()
    
    // 获取view宽度
    query.select('.ad-text').boundingClientRect(rect => {
      containerWidth= rect ? rect.width : 0 
    })
    
    // 获取text宽度
    query.select('.marqueeText').boundingClientRect(rect => {
      contentWidth= rect ? rect.width : 0 
    })
    query.exec()
	console.log(1111,containerWidth,contentWidth)
		  const animate = () => {
	        this.position -= 1;
	        if (this.position < -contentWidth) {
	          this.position = containerWidth;
	        }
	        this.animationFrame = requestAnimationFrame(animate);
	      };
	      
	      this.animationFrame = requestAnimationFrame(animate);
	    }
	  }
	}
	// Page({
	//   data:{
	// 	   textDate: "",
	// 	   position: 0
	//   },
	//   onLoad() {
	// 	  console.log(12)
	//     this.startMarquee();
	//   },
	//   startMarquee() {
	//     const query = wx.createSelectorQuery();
	//     query.select('.ad-text').boundingClientRect();
	//     query.exec(res => {
	// 		console.log("1111",res)
	//       const textWidth = res[0].width / 2; // 因为复制了一份内容
	//       this.timer = setInterval(() => {
	//         let newPos = this.data.position - 1;
	//         if (newPos < -textWidth) {
	//           newPos = 0;
	//         }
	//         this.setData({ position: newPos });
	//       }, 16); // 约60fps
	//     });
	//   },
	//   onUnload() {
	//     clearInterval(this.timer);
	//   }
	//   })
</script>

<style scoped>
	.content_box{
		width:100%;
		height:auto;
		padding:0;
		margin: 0;
		padding-bottom: 25vw;
	}
	.first-top{
		width: 100%;
		height: auto;
		background-image: url(../../static/images/mine/top_banner.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
	}
	.first-banner{
		padding-top: 15vw;
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		gap: 7%;
		align-items: center;
	}
	.banner-box{
		width: 16% ;
		height: auto;
		/* background-color: #fff; */
		border-radius: 5%;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.banner-box img{
		width: 100%;
		height: auto;
	}
	.banner-box text{
		font-size: 3.5vw;
		font-weight: bolder;
	}
	.second-banner{
		 width: 92%;
		 height: 25vw;
		 margin: 0 auto;
		 background-image: url(../../static/images/mine/total_banner.png);
		 background-size: 100% 100%;
		 background-repeat: no-repeat;
		 margin-top: 3vw;
		 display: flex;
		 justify-content: center;
		 align-items: center;
		 
	}
	.second-item{
		width: 30%;
		height: auto;
		text-align: center;
		font-size: 4vw;
		font-weight: bold;
	}
	.item-num{ 
		font-size: 7vw;
		color: #097BF0;
	}
	.item-name{
		margin-top:3vw;	
	}
	.is-border{
		border: 1px solid #E2E2E2;
		border-top:none;
		border-bottom: none;
	}
	.ad{
		width: 92%;
		height: 8vw;
		font-size: 4vw;
		font-weight: 700;
		margin: 5vw auto;
		background-image: url(/static/images/mine/over_talk.png);
		background-size: 100% 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color:#186EE4;
		padding-right: 4vw;
		padding-left: 20vw;
	}
	.ad image{
		width: 4vw;
		height: 4vw;
	}
	.revenue-box{
		width: 92%;
		background-color: #fff;
		padding: 2vw 3vw;
		margin: 0 auto;
		border-radius: 4vw;
	}
	.revenue-box-money{
		width: 100%;
		height: 10vw;
		display: flex;
		align-items: center;
		gap: 2vw;
		font-size: 5vw;
		font-weight: 700;
		
	}
	.revenue-box-money image{
		width: 8vw;
		height: 8vw;
	}
	.revenue-box-item{
		width: 100%;
		height: 20vw;
		padding: 0 4vw;
		background: linear-gradient(to right, #F4F9F5, #FBF1E8);
		margin-top: 3vw;
		border-radius: 4vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 10vw;
		text-align: center;
		font-size: 3.5vw;
		
	}
	.right-top{
		font-weight: 700;
		color:#333333;
	}
	.right-bottom{
		margin-top: 3vw;
		color:#666666;
	}
	.revenue-box-left{
		text-align: right;
	}
	.left-top{
		color: #D9670F;
		font-size: 6vw;
		font-weight: 700;
	}
	.left-botom{
		margin-top: 3vw;
		color: #999999;
	}
	.ad-text{
		width: 90%;
		overflow: hidden;
		white-space: nowrap;
	}
</style>
